<template>
  <div class="rightbox" v-cloak>
    <h1>医生列表</h1>
    <el-row style="width: 96%;margin:2%;min-width:800px;">
      <el-col :span="3">
        <el-cascader
          clearable
          expand-trigger="hover"
          :options="departData"
          :show-all-levels="false"
          v-model="departmentindex">
        </el-cascader>
      </el-col>
      <el-col :span="3" style="margin-left:20px;">
        <el-select clearable v-model="numberindex" placeholder="请选择号别">
          <el-option v-for="(item, index) in numberData" v-bind:key="index" v-bind:label="item.name" v-bind:value="item.numberindex"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3" style="margin-left:20px;">
        <el-input v-model="name" placeholder="请输入姓名"></el-input>
      </el-col>
      <el-col :span="1" style="margin-left:20px;">
        <el-button type="primary" @click="Search">查询</el-button>
      </el-col>
    </el-row>
    <el-table
    :data="contentList"
    border
    style="width: 96%;margin:2%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div style="margin-bottom:20px;">医生简介：
            <span>{{props.row.remarks}}</span>
          </div>
          <span>其他描述：</span>
          <div class="preview" v-for="(item, index) in props.row.fileModel" v-bind:key="index">
            <p v-if="item.type == 1">{{item.value}}</p>
            <img style="width:300px;" v-if="item.type == 2" v-bind:src="item.value">
            <video v-bind:src="item.value" style="width:300px;" v-if="item.type == 3" controls></video>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="departmentName"
        label="所属科室"
        width="100">
      </el-table-column>
      <el-table-column
        prop="numberName"
        label="挂号级别"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="headimage"
        label="头像"
        width="120">
        <template slot-scope="scope">
          <img :src="scope.row.headimage" style="width:100px;"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="weekModel"
        label="排班信息"
        width="120">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.weekModel" :key="index">{{item.weekStr}}：{{item.timeStr}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.state == 1">启用</span>
          <span v-if="scope.row.state == -1">禁用</span>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="Modify(scope)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page" v-if="total >= 5">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="pagelimit"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data () {
    return {
      contentList: [
        {
          title: '',
          thumbnail: '',
          contentList: []
        }
      ],
      departData: [],
      departmentindex: [],
      numberData: [],
      numberindex: '',
      name: '',
      false: false,
      pagelimit: 5,
      pageindex: 0,
      total: '',
      columnindex: ''
    }
  },
  methods: {
    Search: function () {
      var that = this
      that.getList()
    },
    getList: function () {
      var that = this
      that.$pub.open()
      axios.post('/gp/Doctor/Index', qs.stringify({
        name: that.name,
        departmentindex: that.departmentindex[1],
        numberindex: that.numberindex,
        pagelimit: that.pagelimit,
        pageindex: that.pageindex
      })
      )
        .then((res) => {
          that.$pub.close()
          if (res.data.code === 0) {
            that.contentList = res.data.data
            that.total = res.data.data.totle
          } else {
            that.$pub.failcode(that, res.data.code, res.data.data)
          }
        })
        .catch(function () {
          that.$pub.catchbox(that)
        })
      axios.post('/gp/Number/Index')
        .then((res) => {
          that.$pub.close()
          if (res.data.code === 0) {
            that.numberData = res.data.data
            that.total = res.data.data.totle
          } else {
            that.$pub.failcode(that, res.data.code, res.data.data)
          }
        })
        .catch(function () {
          that.$pub.catchbox(that)
        })
      axios({
        method: 'post',
        url: '/gp/Department/Index'
      })
        .then((res) => {
          that.$pub.close()
          if (res.data.code === 0) {
            var departData = []
            for (var i = 0; i < res.data.data.length; i++) {
              departData.push({value: res.data.data[i].departmentindex, label: res.data.data[i].name, children: []})
              for (var j = 0; j < res.data.data[i].subset.length; j++) {
                departData[i].children.push({value: res.data.data[i].subset[j].departmentindex, label: res.data.data[i].subset[j].name})
              }
            }
            that.departData = departData
          } else {
            that.$pub.failcode(that, res.data.code, res.data.data)
          }
        })
        .catch(function () {
          that.$pub.catchbox(that)
        })
    },
    handleCurrentChange (val) {
      var that = this
      that.pageindex = val
      that.getList()
    },
    Modify: function (scope) {
      var that = this
      that.$router.push({
        name: 'proDataModify',
        params: {
          doctorindex: scope.row.doctorindex
        }
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
